import { defineComponent, computed, unref } from 'vue';
import './MoreVersionPopup.less';
import type { CardDetail } from '/@/api/gateruler/model/cardModel';
import { useVModels } from '@vueuse/core';
import { Popup } from 'vant';
import { useGo } from '/@/hooks/web/usePage';
import setting from '/@/settings/projectSetting';

export default defineComponent({
  name: 'GateRuleMoreVersionPopup',
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      required: true,
      default: () => {
        return false;
      },
    },
    cardDetail: {
      type: Object as PropType<CardDetail>,
      required: true,
    },
  },
  setup(props, { emit }) {
    const { show } = useVModels(props, emit);

    const go = useGo();

    const versionList = computed(() => {
      const { cardDetail } = props;
      return cardDetail.other_version;
    });

    return () => (
      <Popup
        class={'other-version-popup'}
        v-model={[show.value, 'show']}
        position={'right'}
        style={{ width: '76%', height: '100%', zIndex: setting.PageTitleZIndex - 1 }}
        overlayStyle={{ zIndex: setting.PageTitleZIndex - 1 }}
        teleport={'body'}
      >
        <ul class={'version-list'}>
          {unref(versionList).map((item) => {
            return (
              <li
                onClick={() => {
                  go(`/gaterulercard/${item.card_id}`);
                }}
              >
                <div class={'s-name'}>{item.series_name}</div>
                <div class={'c-no text-gray-400'}>{item.card_no}</div>
                <div class={'lines bg-gradient-to-r from-white via-gray-400/30 to-white w-full'} />
              </li>
            );
          })}
        </ul>
      </Popup>
    );
  },
});
